<template>
	<view class="main">
		<view class="title-box">
			<view class="title-bg">
				<image src="/static/mine/title.png" mode="aspectFill" />
			</view>
			<view class="dispaly-align-center txt">注册</view>
		</view>
		<view class="form">
			<view class="form-bg">
				<image src="/static/mine/form.png" mode="aspectFill" />
			</view>
			<view class="form-content">
				<view class="dispaly-just-between m-b-70">
					<view class="form-item">
						<view class="form-title dispaly-center" @click="showSchool = true">
							<view class="title">学校选择</view>
							<view class="icon">
								<up-icon name="arrow-down-fill" color="#f5c245" size="14"></up-icon>
							</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="i">{{ formData.school ? formData.school : '选择学校' }}</view>
						</view>
					</view>

					<!-- <view class="form-item">
						<view class="form-title dispaly-center">
							<view class="title">专业</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="ip">
								<input type="text" class="i" v-model="formData.speciality">
							</view>
						</view>
					</view> -->
				</view>

				<view class="dispaly-just-between">
					<view class="form-item">
						<view class="form-title dispaly-center">
							<view class="title">昵称</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="ip">
								<input type="text" class="i" v-model="formData.nickName" />
							</view>
						</view>
					</view>
				</view>

				<view class="dispaly-just-between m-b-70">
					<!-- <view class="form-item">
						<view class="form-title dispaly-center">
							<view class="title">年级</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="ip">
								<input type="text" class="i" v-model="formData.grade">
							</view>
						</view>
					</view> -->
					<!-- <view class="form-item">
						<view class="form-title dispaly-center">
							<view class="title">学号</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="ip">
								<input type="text" class="i" v-model="formData.studentId">
							</view>
						</view>
					</view> -->
				</view>
				<view class="dispaly-just-between m-b-70">
					<view class="form-item">
						<view class="form-title dispaly-center">
							<view class="title">微信</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="ip">
								<input type="text" class="i" v-model="formData.wx" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-title dispaly-center">
							<view class="title">QQ</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="ip">
								<input type="number" maxlength="11" class="i" v-model="formData.qq" />
							</view>
						</view>
					</view>
				</view>

				<view class="dispaly-just-between m-b-70">
					<!-- <view class="form-item">
						<view class="form-title dispaly-center">
							<view class="title">校园卡截图</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="block" @click="upload" v-if="!formData.cardImage">
								<view class="block-bg">
									<image src="/static/mine/up-b.png" mode="aspectFill" />
								</view>
								<view class="block-a">
									<image src="/static/mine/up-a.png" mode="aspectFill" />
								</view>
							</view>
							<image :src="formData.cardImage" @click="upload" class="cardImage" v-else
								mode="aspectFill" />
						</view>
					</view> -->
					<view class="form-item" style="width: 100%">
						<view class="form-title dispaly-center">
							<view class="title">备注</view>
						</view>
						<view class="ip-box dispaly-center">
							<textarea class="txt-a-remark" placeholder="备注" disabled v-model="content"></textarea>
						</view>
					</view>
				</view>
				<view class="dispaly-just-between">
					<view class="form-item" style="width: 100%">
						<view class="form-title dispaly-center">
							<view class="title">手机号</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="ip">
								<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumberChange">获取手机号</button> -->
								<input type="number" class="i" maxlength="11" v-model="formData.phonenumber" />
							</view>
						</view>
					</view>
					<!-- <view class="form-item">
						 <view class="form-title dispaly-center">
							<view class="title">验证码</view>
						</view>
						<view class="ip-box dispaly-center">
							<view class="line"></view>
							<view class="ip">
								<input type="number" class="i" maxlength="11" v-model="formData.code">
							</view>
						</view>  
					</view> -->
				</view>
				<!--<view class="code">
					<view class="code-box" v-if="show" @click="getCode">
						<view class="code-bg">
							<image src="/static/mine/code.png" mode="aspectFill" />
						</view>
						<view class="get-code dispaly-align-center">获取</view>
					</view>
					<view class="code-box" v-else>
						<view class="code-bg">
							<image src="/static/mine/code.png" mode="aspectFill" />
						</view>
						<view class="get-code dispaly-align-center">{{ count + 's后获取' }}</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="proxy dispaly-center">
			<view class="check-box" @click="proxyBool = !proxyBool">
				<view class="check-bg">
					<image src="/static/mine/check.png" mode="aspectFill" />
				</view>
				<view class="g" v-if="proxyBool">
					<up-icon name="checkbox-mark" color="#fff" size="13"></up-icon>
				</view>
			</view>
			<view class="proxy-box dispaly-center">
				<view class="ar" @click="proxyBool = !proxyBool">我已阅读并同意</view>
				<view class="xy" @click="$goUrl('/subPackage/mine/agreement')">《用户协议》</view>
			</view>
		</view>
		<view class="register-box">
			<view class="title-bg">
				<image src="/static/mine/register.png" mode="aspectFill" />
			</view>
			<view class="dispaly-align-center txt" @click="userRegister">注册</view>
		</view>
	</view>
	<up-picker
		@confirm="schoolConfirm"
		@cancel="showSchool = false"
		cancelColor="#ee003e"
		confirmColor="#2d68ea"
		:show="showSchool"
		:columns="schoolList"
		keyName="name"
		closeOnClickOverlay
		@close="showSchool = false"
	></up-picker>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { uploadImage, debounce, deleteObjectEmptyKey } from '@/utils/util';
import { register, productCate, getPhoneCode, proxy } from '@/api/apiList';
import { onLoad } from '@dcloudio/uni-app';

const schoolList = ref([]);
const getGardCateList = async () => {
	const res = await productCate({
		type: 4
	});
	if (res.code == 200) {
		schoolList.value = [res.data];
	}
};

const content = ref('');
const getProxy = async () => {
	const res = await proxy('beizhu');
	if (res.code == 200) {
		content.value = res.data.beizhu;
	}
};

onLoad(() => {
	getGardCateList();
	getProxy();
});

const showSchool = ref(false);

// 选择学校
const schoolConfirm = (data) => {
	formData.school = data.value[0].name;
	showSchool.value = false;
};

const upload = async () => {
	const res = await uploadImage();
	formData.cardImage = res[0];
	console.log(res);
};

// 获取验证码
const count = ref('');
const show = ref(true);
const timer = ref(null);
let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
const getCode = debounce(
	async () => {
		if (formData.phonenumber) {
			if (!reg.test(formData.phonenumber)) {
				await uni.showToast({
					title: '请填写正确的手机号',
					icon: 'none'
				});
			} else {
				const res = await getPhoneCode({
					phonenumber: formData.phonenumber
				});
				if (res.code == 200) {
					await uni.showToast({
						title: '验证码发送成功',
						icon: 'none'
					});
					const TIME_COUNT = 60;
					if (!timer.value) {
						count.value = TIME_COUNT;
						show.value = false;
						timer.value = setInterval(() => {
							if (count.value > 0 && count.value <= TIME_COUNT) {
								count.value -= 1;
							} else {
								show.value = true;
								clearInterval(timer.value);
								timer.value = null;
							}
						}, 1000);
					}
				} else {
					await uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}
		} else {
			await uni.showToast({
				title: '请填写手机号码',
				icon: 'none'
			});
		}
	},
	800,
	false
);

const proxyBool = ref(false);

const formData = reactive({
	school: '', // 学校
	speciality: '', // 专业
	grade: '', // 年级
	studentId: '', // 学号
	qq: '', // QQ
	wx: '', // 微信
	cardImage: '', // 校园卡截图
	phonenumber: '', // 手机号
	nickName: '' // 名称
	// code: '', // 验证码
});

// 注册
const userRegister = async () => {
	if (check()) {
		if (proxyBool.value) {
			await uni.showLoading({
				title: '注册中'
			});
			const newFormData = deleteObjectEmptyKey(formData);

			const res = await register(newFormData);
			if (res.code == 200) {
				uni.setStorageSync('userInfo', res.data);
				uni.hideLoading();
				await uni.showToast({
					title: '注册成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}, 1500);
			} else {
				uni.hideLoading();
			}
		} else {
			await uni.showToast({
				title: '请同意勾选用户协议',
				icon: 'none'
			});
		}
	}
};

// 校验
const check = () => {
	const {
		school,
		speciality,
		grade,
		studentId,
		qq,
		wx,
		// cardImage,
		phonenumber,
		nickName
		// code
	} = formData;
	if (!school) {
		uni.showToast({
			title: '请选择学校',
			icon: 'none'
		});
		return false;
	}
	// if (!speciality) {
	// 	uni.showToast({
	// 		title: '请填写专业',
	// 		icon: 'none'
	// 	})
	// 	return false
	// }
	// if (!grade) {
	// 	uni.showToast({
	// 		title: '请填写年级',
	// 		icon: 'none'
	// 	})
	// 	return false
	// }
	// if (!studentId) {
	// 	uni.showToast({
	// 		title: '请填写学号',
	// 		icon: 'none'
	// 	})
	// 	return false
	// }
	if (!wx) {
		uni.showToast({
			title: '请输入微信',
			icon: 'none'
		});
		return false;
	}

	// let re = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/;

	// if(!re.test(wx)){
	// 	 uni.showToast({
	// 		title: '微信号格式不正确',
	// 		icon: 'none'
	// 	})
	// 	return false;
	// }
	if (!qq) {
		uni.showToast({
			title: '请填写qq',
			icon: 'none'
		});
		return false;
	}
	let reQ = /^[1-9][0-9]{4,9}$/gim;
	if (!reQ.test(qq)) {
		uni.showToast({
			title: 'qq格式不正确',
			icon: 'none'
		});
		return false;
	}
	if (!nickName) {
		uni.showToast({
			title: '请填写昵称',
			icon: 'none'
		});
		return false;
	}
	// if (!cardImage) {
	// 	uni.showToast({
	// 		title: '请上传校园卡截图',
	// 		icon: 'none'
	// 	})
	// 	return false
	// }
	if (!phonenumber) {
		uni.showToast({
			title: '请填写手机号码',
			icon: 'none'
		});
		return false;
	}

	let reg = /^1[23456789]\d{9}$/;
	if (!reg.test(phonenumber)) {
		uni.showToast({
			title: '手机号格式不正确',
			icon: 'none'
		});
		return false;
	}

	// if (!code) {
	// 	uni.showToast({
	// 		title: '请填写验证码',
	// 		icon: 'none'
	// 	})
	// 	return false
	// }
	return true;
};
</script>

<style lang="scss" scoped>
.m-b-70 {
	margin-bottom: 30rpx;
}

.main {
	padding: 60rpx;

	.title-box {
		width: 632rpx;
		height: 76rpx;
		position: relative;

		.title-bg {
			width: 632rpx;
			height: 76rpx;

			image {
				width: 632rpx;
				height: 76rpx;
			}
		}

		.txt {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			font-family: IPix;
			font-size: 28rpx;
			color: #fff;
			line-height: 0rpx;
			width: 632rpx;
			height: 76rpx;
		}
	}

	.register-box {
		width: 632rpx;
		height: 90rpx;
		position: relative;

		.title-bg {
			width: 632rpx;
			height: 76rpx;

			image {
				width: 632rpx;
				height: 90rpx;
			}
		}

		.txt {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			font-family: IPix;
			font-size: 28rpx;
			color: #fff;
			line-height: 0rpx;
			width: 632rpx;
			height: 90rpx;
		}
	}

	.form {
		width: 632rpx;
		height: 964rpx;
		margin-top: 45rpx;
		position: relative;

		.form-bg {
			image {
				width: 632rpx;
				height: 964rpx;
			}
		}

		.form-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 60rpx;

			.code {
				display: flex;
				justify-content: flex-end;

				.code-box {
					width: 126rpx;
					height: 57rpx;
					position: relative;

					.code-bg {
						width: 126rpx;
						height: 57rpx;

						image {
							width: 126rpx;
							height: 57rpx;
						}
					}

					.get-code {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						width: 126rpx;
						height: 57rpx;
						font-family: IPix;
						font-size: 24rpx;
						color: #ffbf0f;
					}
				}
			}

			.form-item {
				width: 50%;

				.form-title {
					.title {
						font-family: IPix;
						font-size: 26rpx;
						color: #ffffff;
					}
				}

				.ip-box {
					margin-top: 15rpx;
					width: 100%;

					.cardImage {
						width: 242rpx;
						height: 162rpx;
					}

					.txt-a-remark {
						width: 100%;
						height: 162rpx;
						box-sizing: border-box;
						background: #ffcd42;
						border-radius: 16rpx;
						padding: 10rpx 16rpx;
						box-sizing: border-box;
					}

					.block {
						// width: 242rpx;
						width: 100%;
						height: 162rpx;
						position: relative;

						.txt-a {
							// position: absolute;
							// top: 0;
							// left: 0;
							// right: 0;
							width: 100%;
							height: 162rpx;
							box-sizing: border-box;
							background: #ffcd42;
							border-radius: 20rpx;

							.a {
								box-sizing: border-box;
								width: 242rpx;
								height: 162rpx;
								padding: 17rpx;
								font-family: IPix;
								font-size: 24rpx;
								color: #000000;
							}
						}

						.block-bg {
							width: 242rpx;
							height: 162rpx;

							image {
								width: 242rpx;
								height: 162rpx;
							}
						}

						.block-a {
							width: 46rpx;
							height: 46rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							margin-left: -23rpx;
							margin-top: -23rpx;

							image {
								width: 46rpx;
								height: 46rpx;
							}
						}
					}

					.line {
						margin-right: 10rpx;
						width: 8rpx;
						height: 2rpx;
						background: #ffbf0f;
					}

					.i {
						font-family: IPix;
						font-size: 26rpx;
						color: #ffbf0f;
					}
				}
			}
		}
	}

	.proxy {
		margin: 39rpx 0 58rpx 0;

		.proxy-box {
			.ar {
				font-family: IPix;
				font-size: 26rpx;
				color: #000000;
			}

			.xy {
				font-family: IPix;
				font-size: 26rpx;
				color: #0b7bf9;
			}
		}

		.check-box {
			margin-right: 11rpx;
			position: relative;
			width: 36rpx;
			height: 36rpx;

			.check-bg {
				width: 36rpx;
				height: 36rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.g {
				width: 36rpx;
				height: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
			}
		}
	}
}
</style>
